<template>
  <v-card>
    <v-card-title><!--水平的卡片 省了class="px-3 pb-2" 意思是x水平左右的距离 bottom底部间隔的距离-->
      <!--按钮-->
      <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
      <!--搜索框，与search属性关联-->
      <v-spacer/><!--空间 撑开-->
      <!--栅格系统  hide-details：隐藏错误信息  append-icon：搜索的图标 v-model：关联查询 single-line：没有字体缩小效果 单横线-->
      <v-flex xs3>
        <v-text-field label="输入商品名称搜索" v-model.lazy="search" append-icon="search" hide-details/>
      </v-flex>
    </v-card-title>
    <v-divider/>
    <!--headers：头 item：数据 pagination：分页  loading：加载 -->
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <!--渲染表格项-->
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">
          <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
          <span v-else>无</span>
        </td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <!--操作-->
        <td class="justify-center layout px-0">
          <v-btn icon @click="editBrand(props.item)">
            <i class="el-icon-edit"/>
          </v-btn>
          <v-btn icon @click="deleteBrand(props.item.id)">
            <i class="el-icon-delete"/>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改' : '新增'}}品牌</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5" style="height:400px">
          <brand-form @close="closeWindow" :oldBrand="oldBrand" :isEdit="isEdit"/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
  // 导入自定义的表单组件
  import BrandForm from './BrandForm'

  export default {
    name: "brand",
    data() {
      return {
        search: '',  // 搜索过滤字段 搜索添加
        totalBrands: 0,  // 总条数
        brands: [],  // 当前页品牌数据
        loading: true,  // 是否在加载中
        pagination: {},  // 分页信息：当前页、每页大小、排序字段、是否降序
        headers: [
          {text: 'id', align: 'center', sortable: true, value: 'id'},//value为数据库中的字段
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true,},
          {text: '操作', align: 'center', value: 'id', sortable: false},
        ],
        show: false,// 控制对话框的显示
        oldBrand: {}, // 即将被编辑的品牌数据
        isEdit: false, // 是否是编辑
      }
    },
    mounted() { // 渲染后执行
      // 查询数据
      this.getDataFromServer();
    },
    watch: {//监控
      pagination: { // 监视pagination属性的变化
        deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
        handler() {
          this.getDataFromServer();// 变化后的回调函数，这里我们再次调用getDataFromServer即可
        }
      },
      search() { // 监视搜索字段
        this.pagination.page = 1; //查询变化后把当前页致1
        this.getDataFromServer(); //实现填入搜索数据时发起异步请求 变化后
      },
      oldBrand: { // 监控oldBrand的变化
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.brand = Object.deepCopy(val)
          } else {
            // 为空，初始化brand
            this.brand = {
              name: '',
              letter: '',
              image: '',
              categories: [],
            }
          }
        },
        deep: true
      }
    },
    methods: {
      getDataFromServer() { // 从服务端加载数据的方法。
        this.loading = true;
        // get发起请求 可以是post put delete ...  通过vue对象（this）发请求 添加了$http vue原型
        this.$http.get("/item/brand/page", {  //http://api.leyou.com/api/item/brand/page
          params: {
            key: this.search,  // 搜索条件
            page: this.pagination.page, // 当前页
            rows: this.pagination.rowsPerPage, // 每页大小
            sortBy: this.pagination.sortBy, // 排序字段
            desc: this.pagination.descending // 是否降序
          }
        }).then(resp => { // 这里使用箭头函数 查询的结果进行赋值给本地属性
          this.brands = resp.data.items;//数据
          this.totalBrands = resp.data.total;//总页数
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
      },
      addBrand() {
        // 修改标记
        this.isEdit = false;
        // 控制弹窗可见：
        this.show = true;
        // 把oldBrand变为null
        this.oldBrand = null;
      },
      editBrand(oldBrand) {
        // 根据品牌信息查询商品分类
        this.$http.get("/item/category/bid/" + oldBrand.id).then(({data}) => {
          // 修改标记
          this.isEdit = true;
          // 控制弹窗可见：
          this.show = true;
          // 获取要编辑的brand
          this.oldBrand = oldBrand;
          // 回显商品分类
          this.oldBrand.categories = data;
        });
      },
      deleteBrand(id) {
        this.$message.confirm("确认要删除该品牌吗？").then(() => {
          this.$http.delete("/item/brand/" + id).then(() => {
            this.$message.success("删除成功");
            this.getDataFromServer();
          });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
      closeWindow() {
        this.getDataFromServer(); // 重新加载数据
        this.show = false; // 关闭窗口
      }
    },
    components: {
      BrandForm
    }
  }
</script>

<style scoped>

</style>
